<template>
  <div>
    <div class="container">
      <!-- 上方按钮 -->
      <div class="handle-box">
        <el-input v-model="query.shortName" placeholder="参会企业" class="handle-input mr10"></el-input>
        <el-select v-model="query.auditStatus" placeholder="预定状态" class="handle-select mr10">
          <el-option key="0" label="待审核" value="0"></el-option>
          <el-option key="1" label="审核通过" value="1"></el-option>
          <el-option key="2" label="审核不通过" value="2"></el-option>
        </el-select>
        <el-select v-model="query.reserveType" placeholder="预定方式" class="handle-select mr10">
          <el-option key="0" label="在线预定" value="1"></el-option>
          <el-option key="1" label="电话预定" value="2"></el-option>
          <el-option key="2" label="其他预定" value="0"></el-option>
        </el-select>
        <!-- <el-select v-model="query.createTime" placeholder="创建时间" class="handle-select mr10">
                    <el-option key="1" label="202/04/10" value="202/04/10"></el-option>
                    <el-option key="2" label="202/04/10" value="202/04/09"></el-option>
                </el-select> -->
        <!-- <div class="handle-select mr10">
                    <el-date-picker
                    v-model="query.createTime"
                    type="datetime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    placeholder="创建时间">
                    </el-date-picker>
                </div> -->
        <div class="handle-select mr10 datePicker">
          <el-date-picker v-model="selectedTime" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" type="daterange"
            start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button type="primary" class="handle-del mr10" @click="resetBtn">重置
        </el-button>
        <el-button type="primary" class="handle-del mr10" @click="addInfo">添加
        </el-button>
      </div>
      <!-- 下方按钮 -->
      <div class="handle-box">
        <!-- <el-checkbox v-model="allChecked" class="handle-del mr10">全选</el-checkbox> -->
        <el-button type="primary" class="handle-del mr10" @click="scheduledAudit">
          预定审核
        </el-button>
        <el-button type="primary" class="handle-del mr10" @click="delAllSelection">
          删除
        </el-button>
      </div>
      <!-- 表格部分 -->
      <el-table :data="tableData" border class="table" :height="contentStyleObj.height" ref="multipleTable"
        header-cell-class-name="table-header" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="参会企业">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" v-if="scope.row.jobString">
              <!-- <p>{{ scope.row.jobString }}</p> -->
              <p class="popoverTxt" v-for="(item,index) in scope.row.jobString" :key="index">{{item}}</p>
              <div slot="reference" class="name-wrapper">
                <!-- <el-tag size="medium">{{ scope.row.shortName }}</el-tag> -->
                <el-link type="primary" :underline="false" @click="toCompanyInfo(scope.row.companyId)">
                  {{ scope.row.shortName }}</el-link>
              </div>
            </el-popover>
            <el-link type="primary" :underline="false" v-else @click="toCompanyInfo(scope.row.companyId)">
              {{ scope.row.shortName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="jobFairOutVo.title" label="招聘会标题"></el-table-column>
        <el-table-column prop="place" label="展位"></el-table-column>
        <el-table-column prop="auditStatus" label="预定状态"></el-table-column>
        <el-table-column prop="reserveType" label="预定方式"></el-table-column>
        <!-- <el-table-column prop="remark" label="备注"></el-table-column> -->
        <el-table-column prop="createTime" label="添加日期"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="text-align: center;margin-top: 30px;">
        <el-pagination background @size-change="handleSizeChange" :current-page="query.page"
          layout="prev, pager, next, jumper, sizes, total" :total="pageTotal"
          :page-sizes="[5, 10, 20, 50, 150, 300, 500]" :page-size="query.size" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="" :visible.sync="editVisible" width="35%">
      <el-form ref="form" :model="form" label-width="140px">
        <el-form-item label="审核结果:">
          <el-radio-group v-model="form.auditStatus">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">不通过</el-radio>
            <el-radio label="0">待定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核不通过原因:" v-if="form.auditStatus == '2'">
          <el-input type="textarea" v-model="form.remark" rows="10" cols="5" style="width:70%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="editVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { companyList, updateStatus, deletes } from '../../../api/JobFair';
export default {
  name: 'basetable',
  data () {
    return {
      contentStyleObj: {
        height: ''
      },
      allChecked: false,
      selectedTime: '',
      value1: true,
      value2: false,
      query: {
        shortName: '',
        reserveType: '',
        auditStatus: '',
        startTime: '',
        endTime: '',
        page: 1,
        size: 10,
        // feat: 新增参数
        admin: 1
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {
        remark: '',
        auditStatus: '1'
      },
      idx: -1,
      id: -1,
      // feat: 默认路径
      url: ''
    };
  },
  created () {
    this.query.auditStatus = this.$route.query.auditStatus || ''
    this.getData();
    // 监听浏览器窗口高度的方法
    // window.addEventListener('resize', this.getHeight);
    this.getHeight()
    // 获取默认路径
    this.url = process.env.BASE_URL;
  },
  watch: {
    '$route.fullPath': function (val, oldVal) {
      this.$nextTick(() => {
        this.query.auditStatus = this.$route.query.auditStatus || ''
        this.getData();
      })
    }
  },
  methods: {
    // 获取窗口的高度 用于适配分页一直都在最下面
    getHeight () {
      this.contentStyleObj.height = document.documentElement && document.documentElement.clientHeight - 370 + 'px';
    },
    // 获取 easy-mock 的模拟数据
    getData () {
      if (this.selectedTime) {
        this.query.startTime = this.selectedTime[0]
        this.query.endTime = this.selectedTime[1]
      }
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      companyList(this.query).then(res => {
        console.log(res);
        if (res.success) {
          console.log(res, '474564564sad46a5s4d6')
          res.data.records.map((item, i) => {
            switch (item.auditStatus) {
              case 0:
                item.auditStatus = '待审核'
                break;
              case 1:
                item.auditStatus = '审核成功'
                break;
              case 2:
                item.auditStatus = '审核失败'
                break
            }

            switch (item.reserveType) {
              case 0:
                item.reserveType = '其他方式'
                break;
              case 1:
                item.reserveType = '在线预定'
                break;
              case 2:
                item.reserveType = '电话预定'
                break
            }
            if (!item.shortName) {
              item.shortName = item.name
            }
          })
          // feat：判断是否大于十条内容
          res.data.records.map((res) => {
            if (res.jobString) {
              if (res.jobString.split('|').length >= 10) {
                let jobString = res.jobString.split('|').slice(0, 10)
                jobString.push('...')
                res.jobString = jobString
              } else {
                res.jobString = res.jobString.split('|')
              }
            }
          })
          this.tableData = res.data.records;
          this.pageTotal = res.data.total
          loading.close()
        } else {
          this.$message.error(res.msg)
          loading.close()
        }
      }).catch(() => {
        this.$message.error('请求错误')
        loading.close()
      });
    },
    // 触发搜索按钮
    handleSearch () {
      this.$set(this.query, 'page', 1);
      this.getData();
    },
    // 删除操作
    handleDelete (index, row) {
      // 二次确认删除
      this.$confirm('您要删除企业报名，删除后不可恢复，是否确定操作？', '', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'message-logout',
        title: '信息提醒'
      }).then(() => {
        let idArr = [{
          id: row.id
        }]
        let obj = {
          id: idArr,
          deleted: 0
        }
        // feat：后端更改接口 单个删除 deletes
        deletes(obj).then((res) => {
          if (res.success) {
            // this.$message('删除成功')
            this.getData();
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'success',
        //   message: '取消'
        // });
      });
    },
    // 多选操作
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    resetBtn () {
      this.query = {
        shortName: '',
        reserveType: '',
        auditStatus: '',
        createTime: '',
        page: 1,
        size: 10
      }
      // 重置时间
      this.selectedTime = ''
      this.getData();
    },
    // 预定审核
    scheduledAudit () {
      if (this.multipleSelection.length <= 0) {
        this.$message.error('请选择要审核的企业')
        return false
      }
      this.editVisible = true;
    },
    // 多选删除
    delAllSelection () {
      if (this.multipleSelection.length <= 0) {
        this.$message.error('请选择要删除的企业')
        return false
      }
      // 二次确认删除
      this.$confirm('您要删除企业报名，删除后不可恢复，是否确定操作？', '', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'message-logout',
        title: '信息提醒'
      }).then(() => {
        let idArr = []
        this.multipleSelection.map((item, i) => {
          idArr.push({
            id: item.id
          })
        })
        let obj = {
          id: idArr,
          deleted: 0
        }
        // feat: 后端更改接口名称
        deletes(obj).then((res) => {
          if (res.success) {
            // this.$message('删除成功')
            this.getData();
          } else {
            this.$message.error(res.msg)
            this.getData();
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'success',
        //   message: '取消'
        // });
      });
    },
    // 编辑操作
    handleEdit (index, row) {
      this.idx = index;
      this.form = row;
      // this.editVisible = true;
      this.$router.push({
        path: '/editenterprise',
        query: {
          id: row.id
        }
      })
    },
    // 保存编辑
    saveEdit () {
      let idArr = []
      let jobFairId = []
      let company = []
      let jobFairName = []
      this.multipleSelection.map((item, i) => {
        idArr.push({
          id: item.id
        })
        jobFairId.push({
          id: item.jobFairId
        })
        company.push({
          id: item.companyId
        })
        jobFairName.push(item.jobFairOutVo.title)
      })
      let obj = {
        auditStatus: Number(this.form.auditStatus),
        auditCause: this.form.remark,
        id: idArr,
        jobFairId: jobFairId,
        companyId: company,
        jobFairName: jobFairName
      }
      if (this.form.auditStatus == 2 && this.form.remark.trim() == '') {
        this.$message.error('请填写审核不通过原因')
        return false
      }
      updateStatus(obj).then((res) => {
        if (res.success) {
          //   this.$message('执行成功')
          this.form.auditStatus = '0'
          this.form.remark = ''
          this.getData();
          this.editVisible = false;
        } else {
          this.$message.error(res.msg)
        }
      })

      // this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      // this.$set(this.tableData, this.idx, this.form);
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'page', val);
      this.getData();
    },
    handleSizeChange (val) {
      console.log(val)
      this.query.size = val
      this.getData();
    },
    // 表格里面的置顶状态
    changeSwitchCeilingState (val) {
      console.log(val, '置顶状态')
    },
    // 表格里面的预定状态
    changeSwitchConditionState (val) {
      console.log(val, '预定状态')
    },
    // 添加招聘会
    addInfo () {
      this.$router.push({
        path: '/addenterprise'
      })
    },
    // feat:跳转主站的企业详情
    toCompanyInfo (id) {
      if (id) {
        window.open(this.url + '/#/Popularenterprises?companyId=' + id, '_blank')
      }
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
    display: inline-block;
}

.handle-select /deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 220px !important;
}
.datePicker {
    width: 220px !important;
    display: inline-block;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.dialog-footer {
    display: flex;
    justify-content: center;
}
.dialog-footer button {
    width: 100px;
}
.popoverTxt {
    line-height: 30px;
}
</style>
<style>
.message-logout {
    width: 20%;
}
.message-logout .el-message-box__btns {
    text-align: center !important;
}
.message-logout .el-message-box__btns button {
    width: 100px;
}
.message-logout .el-message-box__header {
    padding: 17px 15px 10px;
}
.message-logout .el-message-box__header .el-message-box__title {
    font-size: 14px;
}
.message-logout .el-message-box__content {
    border-top: 2px solid rgba(0, 147, 255, 1);
}
.message-logout .el-message-box__headerbtn .el-message-box__close {
    color: #1893fc;
}
</style>